<template>
  <div id="about">
   <van-search
  v-model="value"
  show-action

  placeholder="请输入搜索关键词"
 
>
  <template #action>
    <div @click="onSearch">搜索</div>
  </template>
</van-search>


<div class="box">
  搜索历史记录
  <p @click="shan">删除</p>
</div>
<div class="box1">
  <ul>
    <li v-for="(item,index) in list" :key="index">
      {{index}}.{{item}}
    </li>
    
  </ul>
</div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
     fenlei:[],
      value:'',
      list: JSON.parse(localStorage.getItem('list'))||[]
    };
  },
  created() {
    this.$axios.get("/json/fenlei.json").then((res) => {
      this.fenlei = res.data.result;
       
        console.log(this.fenlei);
    });
  },
  methods: {
    onSearch(){
      this.list.push(this.value)
      localStorage.setItem('list',JSON.stringify(this.list))

   
    },


    shan(){
      localStorage.removeItem('list')
      this.list=''
    }
  },
};
</script>

<style scoped lang='scss'>
.box1{
  width: 100%;
  ul{
    width: 100%;
    display: flex;
    justify-content: space-between;
    
    line-height: 50px;
    flex-wrap: wrap;
    li{
      width: 48%;
      height: 50px;
      // background-color: red;
    }
  }
}
.box{
  width: 100%;
  height: 50px;
  text-align: center;
 p{
   float: left;
 }
}
</style>
